<template>
  <div>
    <div
      style="box-shadow: 0px 0px 15px #ccc; text-align:center;margin-top:30px;"
      v-for="i in arr"
    >
      <div style="padding-top:56px;">
        <img :src="i.img" style="width: 160px;height: 160px;border-radius: 50%;" />
      </div>
      <div style="padding:6px 0px;font-size:18px;">
        {{i.title}}
        <span style="font-size:13px;color:#696969;">首席设计师</span>
      </div>
      <div style="padding:6px 0px 30px 0px;font-size:12px;color:#696969;">
        经验
        <span style="color:#3EC9AD;">{{i.ri}}年</span>
        / 代表作:{{i.zuo}}件
      </div>
      <div v-for="a in i.arr">
        <div style="padding:0px 10px;box-sizing: border-box;">
          <img :src="a.img" style="width:100%;" />
        </div>
        <div style="padding:10px 0px;font-size:12px;color:#696969;">
          代表作品时间:
          <span style="color:#3EC9AD;">{{a.ri}}年</span> 设计风格:
          <span style="color:#3EC9AD;">{{a.ge}}</span>
        </div>
      </div>
      <btn te="查看他的更多案例"></btn>
    </div>
  </div>
</template>

<script>
import btn from "./btn.vue";
export default {
  components: {
    btn
  },
  data() {
    return {
      arr: [
        {
          img:
            "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cHM6Ly81NzVlNWIzNWM0ZWU3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTYvMDYvODE4YzA3Nzc3NTM2N2M2ZWJkNDBhYmI5NTA1MTdmYjgtMTYweDE2MC5qcGc_p_p100_p_3D.m.jpg",
          title: "张媛",
          ri: "8",
          zuo: "3",
          arr: [
            {
              img:
                "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cHM6Ly81NzVlNWIzNWM0ZWU3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTYvMDYvY2FjZmY0OGVhYWU0ZTVkMGI5MGExYWIxODBmMTMyMTEtMzAweDIwMC5qcGc_p_p100_p_3D.m.jpg",
              ri: "2010",
              ge: "北欧"
            },
            {
              img:
                "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cHM6Ly81NzVlNWIzNWM0ZWU3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTYvMDYvYTQzY2U4Yzk4M2E5NmNiZTM1YTAzNzk0ZWQ4M2Q0ZTQtMzAweDIwMC5qcGc_p_p100_p_3D.m.jpg",
              ri: "2010",
              ge: "北欧"
            }
          ]
        },
        {
          img:
            "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cHM6Ly81NzVlNWIzNWM0ZWU3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTYvMDYvNTVmMDdjNjBjM2Y4MDEwMWE0NzYwNzdlMTUyMWE1ODYtMTYweDE2MC5qcGc_p_p100_p_3D.m.jpg",
          title: "张媛",
          ri: "8",
          zuo: "3",
          arr: [
            {
              img:
                "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cHM6Ly81NzVlNWIzNWM0ZWU3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTYvMDYvYWM3YmE5ZWVhZjdjZTIyOTc2OGVkMzhkYTJhNjhlN2EtMzAweDIwMC5qcGc_p_p100_p_3D.m.jpg",
              ri: "2010",
              ge: "北欧"
            },
            {
              img:
                "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cHM6Ly81NzVlNWIzNWM0ZWU3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTYvMDYvMzk1NTZlNGM4ZTI2MTMzZDBmZDU2YWU4MDBlMjVmNWEtMzAweDIwMC5qcGc_p_p100_p_3D.m.jpg",
              ri: "2010",
              ge: "北欧"
            }
          ]
        },
        {
          img:
            "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cHM6Ly81NzVlNWIzNWM0ZWU3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTYvMDYvMWJiYTVkZjU0NTFjMzQ2Njk5Y2Q2NGQ2MTM4YmRlNDItMTYweDE2MC5qcGc_p_p100_p_3D.m.jpg",
          title: "张媛",
          ri: "8",
          zuo: "3",
          arr: [
            {
              img:
                "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cHM6Ly81NzVlNWIzNWM0ZWU3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTYvMDYvYWM3YmE5ZWVhZjdjZTIyOTc2OGVkMzhkYTJhNjhlN2EtMzAweDIwMC5qcGc_p_p100_p_3D.m.jpg",
              ri: "2010",
              ge: "北欧"
            },
            {
              img:
                "https://ccdn.goodq.top/caches/31d77848c79d76c10027e5f47157bcf2/aHR0cHM6Ly81NzVlNWIzNWM0ZWU3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTYvMDYvY2FjZmY0OGVhYWU0ZTVkMGI5MGExYWIxODBmMTMyMTEtMzAweDIwMC5qcGc_p_p100_p_3D.m.jpg",
              ri: "2010",
              ge: "北欧"
            }
          ]
        }
      ]
    };
  }
};
</script>

<style>
</style>